<template>
  <div class="warp">
    <div class="accumulate">
      <div class="tab">
        <p
          v-for="(item, index) in tab"
          :key="index"
          :class="{ active: tabIndex == index }"
          @click="changeTabIndex(index)"
        >
          {{ item }}
        </p>
      </div>

      <!-- 肥力 -->
      <fertility v-if="tabIndex == 0" :field-id="fieldId" />
      <!-- 墒情 -->
      <soil-moisture
        v-if="tabIndex == 1"
        :field-id="fieldId"
        :x-axis="xaxis"
        :y-axis="yaxis"
      />
      <!-- 土壤温度 -->
      <soil-temperature
        v-if="tabIndex == 2"
        :field-id="fieldId"
        :x-axis="xaxis"
        :y-axis="yaxis"
      />
      <!-- <div class="echartsBox" v-if="tabIndex == 0">
        <div class="echarts" v-if="tabIndex == 1" id="chartMoisture"></div>
        <div class="echarts" v-if="tabIndex == 2" id="chartHeat"></div>

        <div class="select" @click="showPicker = true">
          {{ pickerText }}年<van-icon name="arrow-down" />
        </div>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </div> -->
    </div>
  </div>
</template>

<script>
import fertility from './cpn/fertility.vue';
import soilMoisture from './cpn/soilMoisture.vue';
import soilTemperature from './cpn/soilTemperature.vue';
export default {
  components: {
    fertility,
    soilMoisture,
    soilTemperature
  },
  data() {
    return {
      tab: ['肥力', '墒情', '土壤温度'],
      tabIndex: 0
    };
  },
  computed: {
    fieldId() {
      return this.$route.query.fieldId;
    },
    xaxis() {
      return this.$route.query.xaxis;
    },
    yaxis() {
      return this.$route.query.yaxis;
    }
  },
  methods: {
    changeTabIndex(index) {
      this.tabIndex = index;
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.accumulate {
  display: flex;
  flex-direction: column;
  .tab {
    padding: 9px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    color: #3c3c3c;
    position: relative;
    p {
      margin: 0 58px;
    }
    p.active {
      font-weight: bold;
      color: #ffa10b;
      position: relative;
    }
    p.active::after {
      content: "";
      position: absolute;
      width: 29px;
      height: 3px;
      background: #ffa10b;
      border-radius: 1px;
      left: 50%;
      transform: translateX(-50%);
      bottom: -4px;
    }
    .van-icon {
      position: absolute;
      left: 19px;
      top: 19px;
    }
  }

  ::v-deep .tip {
    padding: 0 16px;
    .tit {
      height: 43px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #504f4f;
      border-bottom: 1px solid #f2f2f3;
      margin-bottom: 12px;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 6px 0;
      .label {
        font-size: 12px;
        font-weight: 400;
        color: #8f8f8f;
        margin-right: 59px;
        display: flex;
        align-items: center;
        span {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          display: block;
          margin-right: 11px;
        }
      }
      .input {
        font-size: 12px;
        font-weight: 400;
        color: #504f4f;
      }
    }
    .bot {
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #f2f2f3;
      margin-top: 7px;
      .botL {
        display: flex;
        align-items: center;
        img {
          width: 20px;
        }
        p {
          margin-left: 5px;
          font-size: 12px;
          font-weight: 400;
          color: #8f8f8f;
        }
      }
      .botR {
        font-size: 12px;
        font-weight: 400;
        color: #504f4f;
      }
    }
  }
}
</style>
